<template>
  <view class="content">
    <u-swiper height="300rpx" :list="swiper" indicator imgMode="aspectFit"></u-swiper>
    <view class="info-content">
      <view class="row name">
        <text class="price">{{ form.rent }}</text>
      </view>
      <view class="row name">
        {{ form.title }}
      </view>
      <view v-if="form.status != 1" class="tag" :style="{ backgroundColor: sattusDict[Number(form.status)] }">
        <text v-if="form.status == 2">不通过</text>
        <text v-else-if="form.status == 1">已通过</text>
        <text v-else>待审核</text>
      </view>
      <view class="row val">地址：{{ form.address || '' }}</view>
      <view class="row val">简介：{{ form.content || '' }}</view>
      <view class="row val">联系人：{{ form.contactPerson || '' }}</view>
      <view class="row val">联系电话：{{ form.contactPhone || '' }}</view>
      <view v-if="form.status == 2" class="row val">不通过原因：{{ form.auditRemark || '' }}</view>
      <view v-if="isReview && isGridWorker && form.status == 0" class="row val audit">
        <u-button size="large" type="success" text="通过" @click="audit(1)"></u-button>
        <u-button size="large" type="error" text="不通过" @click="reasonModal.show = true"></u-button>
      </view>
    </view>

    <u-modal :show="reasonModal.show" title="不通过原因" showCancelButton>
      <view style="width: 100%;">
        <u-form labelPosition="top" :model="reasonModal.form" :rules="reasonModal.rules" ref="reasonForm">
          <u-form-item prop="reason">
            <u-textarea v-model="reasonModal.form.auditRemark" placeholder="请输入正文内容" />
          </u-form-item>
        </u-form>
      </view>
      <template #confirmButton>
        <view class="reason-foot">
          <view class="btn">
            <u-button text="关闭" @click="reasonModal.show = false"></u-button>
          </view>
          <view class="btn" style="margin-left: 10rpx;">
            <u-button type="primary" text="确认" @click="reasonSubmit"></u-button>
          </view>
        </view>
      </template>
    </u-modal>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import communityApi from '../request/api/community'
import config from '../request/config'
export default {
  data() {
    return {
      currentId: '',
      // 是否为审核页面
      isReview: false,
      form: {},
      swiper: [],
      sattusDict: ['#f9ae3d', '#5ac725', '#cc463d'],
      reasonModal: {
        show: false,
        form: {
          auditRemark: ''
        },
        rules: {
          auditRemark: [{ required: true, message: '请输入', trigger: ['blur'] }],
        }
      }
    }
  },
  computed: {
    ...mapGetters('userInfo', ['user', 'isGridWorker']),
  },
  onLoad(option) {
    this.currentId = option.id
    this.isReview = !!option.review
    this.getDetail()
  },
  // 下拉刷新
  async onPullDownRefresh() {
    await this.getDetail()
    uni.stopPullDownRefresh()
  },
  methods: {
    async reasonSubmit() {
      try {
        await this.$refs.reasonForm.validate()
      } catch (error) {
        this.reasonModal.show = true
        return true
      }
      await this.audit(2)
      this.reasonModal.show = false
    },
    async getDetail() {
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        var { data } = await communityApi.getItemById(this.currentId)
      } finally {
        uni.hideLoading()
      }
      this.form = data
      this.swiper = this.form?.images?.split(",")?.map(url => config.baseUrl + url) || []
    },
    /**
     * 审核
     * @param {*} status 
     */
    async audit(status) {
      const params = {
        postId: this.form.postId,
        status,
        // 审核人
        auditBy: this.user.userId,
        // 审核时间
        auditTime: uni.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd hh:MM:ss'),
      }
      if (2 === status) {
        // 不通过原因
        params.auditRemark = this.reasonModal.form.auditRemark
      }
      uni.showLoading({
        title: '加载中',
        mask: true,
      });
      try {
        await communityApi.updateCommunity(params)
      } finally {
        uni.hideLoading()
      }
      uni.$showMsg('审核完毕')
      this.getDetail()
    }
  },
  onShareAppMessage() {
    return {
      title: this.form.title,
      path: `/house/detail?id=${ this.form.postId }`, // 分享路径
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  box-sizing: border-box;

  .info-content {
    padding: 40rpx;
    background-color: #fff;

    .row {
      margin-bottom: 10rpx;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .price {
      color: #cc463d;
      font-size: 50rpx;
      font-weight: bold;
    }

    .name {
      font-size: 32rpx;
      font-weight: bold;
    }

    .val {
      color: #909399;
      font-size: 30rpx;
    }

    .audit {
      display: flex;
      justify-content: space-between;
      margin-top: 80rpx;

      &::v-deep .u-button {
        width: auto !important;
        height: 50rpx !important;
      }
    }

    .tag {
      border-radius: 6rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      width: 120rpx;
      color: #fff;
      margin: 15rpx 0;
      font-size: 22rpx;
    }
  }
}
.reason-foot {
  display: flex;
  .btn {
    flex: 1;
  }
}
</style>
